<template>
  <div class="sidebar">
    <personal :userAllInfo="{
      iconUrl:person_info.iconUrl,
      nickName:person_info.nickName,
      pcImgTxtUrl:person_info.pcImgtxtUrl,
      focus:person_info.concernNum,
      fans:person_info.followNum,
      sign:person_info.sign,
      userId:person_info.userId,
      area: person_info.areaProvName+person_info.areaCityName+person_info.areaDistName
    }"/>
    <!--根据groupType菜单分组 10：赛事权限 11：培训权限 12：票务权限 13：赞助权限 20：订单管理 30：服务管理 40：支付管理 50：系统管理-->
    <el-scrollbar class="side-scroller">
      <el-menu class="silde-menu"
        background-color="#fff"
        active-text-color="#24c881"
        :default-openeds="defaultOpenList"
        :default-active="activeIndex"
        @select="handleSelect">
        <el-submenu index="race" v-if="authData[10]">
            <template slot="title">赛事权限</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[10]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <!-- vue-router匹配方式 -->
                <!-- <router-link :to="router.serviceUrl" tag="li" @click.native="handleChangeRoute(item.serviceName)" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </router-link> -->
                <!-- element-ui组件 匹配方式 -->
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" lass="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="train" v-if="authData[11]">
            <template slot="title">培训权限</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[11]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="piao" v-if="authData[12]">
            <template slot="title">票务权限</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[12]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="zanzhu" v-if="authData[13]">
            <template slot="title">赞助权限</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[13]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="authorized" v-if="accpData.length>0">
            <template slot="title">授权功能</template>
            <el-row class="silde-menu-row">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont">&#xe686;</i>
                <span class="title">授权</span>
              </el-col>
              <el-col :span="12" v-for="(item,index) in accpData" :key="index">
                <el-menu-item  :index="'/authorized/' + item.orgUserId + '?orgname=' + item.orgUserName" @click="setOrgId(item.orgUserId, item.roleType)" class="hidden" :title="item.orgUserName">
                  {{item.orgUserName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
            <!-- <el-menu-item v-for="(item,index) in accpData" :key="index" :index="'/authorized/' + item.orgUserId + '?orgname=' + item.orgUserName" @click="setOrgId(item.orgUserId, item.roleType)" class="hidden" :title="item.orgUserName">
              {{item.orgUserName}}
            </el-menu-item> -->
        </el-submenu>
        <el-submenu index="order"  v-if="authData[20]">
            <template slot="title">订单管理</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[20]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="service" v-if="authData[30]">
            <template slot="title">服务管理</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[30]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="pay" v-if="authData[40]">
            <template slot="title">支付管理</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[40]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
        <el-submenu index="system" v-if="authData[50]">
            <template slot="title">系统管理</template>
            <!--根据serviceCode匹配菜单 @click="handleChangeRoute"-->
            <!--正常的路由匹配class-->
            <el-row class="silde-menu-row" v-for="item in authData[50]" :key="item.id">
              <el-col :span="24" class="silde-menu-second">
                <i class="iconfont" v-html="item.iconUrl.substr(-8)"></i>
                <span class="title">{{item.serviceName}}</span>
              </el-col>
              <el-col :span="12" v-for="router in item.children" :key="router.id">
                <el-menu-item :route="{path: router.serviceUrl}" :index="router.serviceUrl" tag="li" class="hidden el-menu-item" :title="router.serviceName">
                  {{router.serviceName}}
                </el-menu-item>
              </el-col>
            </el-row>
            <div class="divider"></div>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
  import {VuecookieGet} from 'utils/cookie'
  import authorizeApi from 'api/authorize'
  import { mapGetters } from 'vuex'
  import Personal from 'components/Personal'
  export default {
    components: {
      Personal
    },
    created () {
      // 认证服务
      authorizeApi.authServiceList({
        userId: this.userId
      }).then((res) => {
        this.authData = res.data
        this.authData.map(item => {
          if (item.serviceCode === '8993') {
            this.$store.dispatch('message_unread', {authOrgId: VuecookieGet('htxk_userId')})
          }
        })
        this.$store.commit('AUTHORIZE_LIST', res.data)
      }).catch((ERR) => {
        return false
      })
      // 授权服务
      authorizeApi.accpOrgList({
        userId: this.userId
      }).then((res) => {
        this.accpData = res.data || []
      }).catch((ERR) => {
        return false
      })
      let menuSelect = localStorage.getItem('menuKey')
      if (menuSelect) {
        this.activeIndex = menuSelect
      }
      if (localStorage.getItem('role_type') === '99') {
        this.$store.dispatch('train_teacher_info', {userId: this.userId, orgUserId: this.$route.query.authOrgId})
      }
    },
    mounted () {
      this.initStyles(this.layout_grid)
    },
    computed: {
      ...mapGetters({
        person_info: 'person_info',
        userId: 'userId',
        layout_grid: 'layout_grid', // 是否栅格布局
        message_unread: 'message_unread',
        message_organize_unread: 'message_organize_unread'
      })
    },
    watch: {
      'layout_grid' (value) {
        this.initStyles(value)
      },
      '$route' () {
        if (this.$route.query.authOrgId && this.$route.fullPath.includes('message')) {
          this.$store.dispatch('message_organize_unread', {authOrgId: this.$route.query.authOrgId})
        }
        if (this.$route.path.includes('message') && !this.$route.query.authOrgId) {
          this.$store.dispatch('message_unread', {authOrgId: VuecookieGet('htxk_userId')})
        }
      }
    },
    data () {
      return {
        iconUrl: '/static/images/default_photo.jpg',
        defaultOpenList: ['race', 'train', 'piao', 'zanzhu', 'authorized', 'order', 'service', 'pay', 'system'],
        authData: [],
        accpData: [],
        activeIndex: ''
      }
    },
    methods: {
      initStyles (layout) {
        let sidebar = document.body.querySelector('.frame-sidebar')
        this.$nextTick(() => {
          let minHeight = sidebar.style.minHeight
          if (layout && minHeight) {
            let personal = sidebar.querySelector('.personal')
            let sildeMenu = sidebar.querySelector('.silde-menu')
            let scrollbarWrap = sidebar.querySelector('.el-scrollbar__wrap')
            let height = (parseInt(minHeight) - parseInt(personal.style.minHeight) - 10)
            height = height > 560 ? 560 : height
            scrollbarWrap && (scrollbarWrap.style.maxHeight = height + 'px')
            sildeMenu && (sildeMenu.style.maxHeight = height + 'px')
          }
        })
      },
      handleSelect (key, keyPath) {
        let curPath = this.$route.path
        localStorage.setItem('auth_orgId', '')
        localStorage.setItem('menuKey', '')
        localStorage.setItem('role_type', '')
        // 路由相同 不作跳转
        if (curPath === key) {
          return false
        }
        localStorage.setItem('menuKey', key)
        this.activeIndex = key
        this.$router.push({path: key})
        this.$nextTick(_ => {
          this.$forceUpdate()
          if (key === '/order') {
            this.$router.push({
              path: '/order',
              query: {
                statusList: '2,4',
                beginCreateDate: new Date().getTime() - 3600 * 1000 * 24 * 30,
                endCreateDate: new Date().getTime(),
                vendorUserId: this.person_info.userId
              }
            })
          }
        })
      },
      handleChangeRoute (code) {
        this.activeIndex = ''
        localStorage.setItem('auth_orgId', '')
        localStorage.setItem('menuKey', '')
        localStorage.setItem('role_type', '')
        if (code === '我的订单') {
          this.$router.push({
            path: '/order',
            query: {
              statusList: '2,4',
              beginCreateDate: new Date().getTime() - 3600 * 1000 * 24 * 30,
              endCreateDate: new Date().getTime(),
              vendorUserId: this.person_info.userId
            }
          })
        }
      },
      setOrgId (id, roleType) {
        localStorage.setItem('auth_orgId', id)
        localStorage.setItem('role_type', roleType)
        if (roleType === 99) {
          this.$store.dispatch('train_teacher_info', {userId: this.userId})
        }
      }
    }
  }
</script>

<style lang="scss">

$active-background-color:#f0fcf9;
.sidebar {
  .side-scroller{
    margin-top: 5px;
    .el-scrollbar__wrap{
      max-height: 560px;
    }
    .el-scrollbar__bar{
      opacity: 1;
      transition: opacity 340ms ease-out
    }
    .silde-menu{
      max-height: 560px;
      padding: 0 20px;
      .el-submenu__title{
        padding: 0 10px !important;
      }
      .el-submenu{
        &:last-child{
          .divider{
            border: none;
          }
        }
      }
      .silde-menu-row{
        padding: 0 10px;
        margin-bottom: 13px;
        // margin-top: -9px;
        .silde-menu-second{
          height: 30px;
          line-height: 30px;
          vertical-align: middle;
          .iconfont{
            font-size: 24px;
            padding-right: 4px;
          }
          .title{
            font-size: 16px;
            vertical-align: top;
          }
        }
      }
    }
  }
  .el-menu {
    background: #fff;
    min-height: 100%;
    border-radius: 0;
    &-item {
      padding: 0 !important;
      height: 34px;
      line-height: 34px;
      min-width: auto;
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow: hidden;
      font-size: 14px;
      color: $color-sub;
      &:hover {
        background: #fff;
        color: $color-primary;
      }
      &.is-active {
        background: #fff;
        color: $color-primary;
        // border-left: 3px solid $color-primary;
        // background: $active-background-color;
      }
    }
    // .router-link-active {
    //   color:$color-primary;
    //   // border-left: 3px solid $color-primary;
    //   background: #fff;
    //   &:hover {
    //     background: #fff;
    //     color: $color-primary;
    //   }
    // }
  }
  .el-submenu{
    text-align: left;
    .el-submenu__title{
      height: 30px;
      margin: 25px 0 9px;
      line-height: 30px;
    }
    &:hover .el-submenu__title {
      background: #fff;
    }
    &__title {
      font-size: 16px;
    }
    &__icon-arrow{
      margin-top: -3px;
      right: 40%;
    }
    &.is-opened{
      > .el-submenu__title{
        .el-submenu__icon-arrow{
          margin-top: -5px;
        }
      }
    }
  }
  .item .el-badge__content.is-fixed {
    top: 20px;
    right: 0px;
    position: absolute;
    transform: translateY(-50%) translateX(100%);
    text-align: center;
  }
}
</style>
